<page-header [title]="'账号列表'"></page-header>
<nz-card [nzBordered]="false">
  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="{ md: 8, lg: 24, xl: 48 }">
      <nz-col nzMd="8" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="no">账号名</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="queryStr" name="no" placeholder="请输入账号名" id="no">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzSpan]="8">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" (click)="fetchAccountList()">查询</button>
        <button nz-button type="reset" class="mx-sm" (click)="fetchAccountList(true)">重置</button>
      </nz-col>
    </nz-row>
  </form>
  <!-- 重新创建按钮选项 -->
  <div style="margin-bottom: 16px;">
    <a nz-popconfirm nzTitle="是否重新创建已选中的{{checkedNumber}}个账号, 请确认这些账号是否已付款?" (nzOnConfirm)="confirmRecreate()">
      <button nz-button [disabled]="disabledButton" [nzType]="'primary'">
        重新创建
      </button>
    </a>
    <span style="margin-left: 8px;" *ngIf="checkedNumber">已选中: {{checkedNumber}}</span>
  </div>
  <!-- 数据表格 -->
  <nz-table
    #accountTable
    [nzData]="accountList"
    [nzFrontPagination]="false"
    [nzLoading]="loading"
    [nzTotal]="dataTotal"
    [(nzPageIndex)]="pageIndex"
    [(nzPageSize)]="pageSize"
    (nzPageIndexChange)="fetchAccountList()">
    <thead>
      <tr>
        <th nzShowCheckbox *ngIf="allDisabled" nzDisabled [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)" nz-tooltip nzTitle="当前页所有账号已创建成功,不可选中">
        </th>
        <th nzShowCheckbox *ngIf="!allDisabled" [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)">
        </th>
        <th>订单号</th>
        <th>账号名</th>
        <th>账号状态</th>
        <th>交易memo</th>
        <th>账号创建时间</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of accountTable.data">
        <!-- 状态为 complete 的不可勾选 -->
        <td nzShowCheckbox [nzDisabled]="(item.status === 'complete')" [(nzChecked)]="selectBillNoList[item.billNo]"
          (nzCheckedChange)="refreshStatus()"></td>
        <td>{{ item.billNo }}</td>
        <td>{{ item.accountName }}</td>
        <td>
          <a nz-popconfirm
            nzTitle="是否重新创建账号: {{ item.accountName }}, 请确认该账号是否已付款?"
            (nzOnConfirm)="confirmRecreate(item.billNo)">
            <nz-tag [nzColor]="'#bbb'" *ngIf="item.status === 'initial'">暂未付款</nz-tag>
            <nz-tag [nzColor]="'#f50'" *ngIf="item.status === 'failToCreate'">创建失败</nz-tag>
            <nz-tag [nzColor]="'#ffc70d'" *ngIf="item.status === 'paid'">付款未创建</nz-tag>
            <nz-tag [nzColor]="'#2db7f5'" *ngIf="item.status === 'paid-recreate'">重新创建中</nz-tag>
          </a>
          <nz-tag [nzColor]="'#87d068'" *ngIf="item.status === 'complete'">创建成功</nz-tag>
        </td>
        <td>{{ item.memo }}</td>
        <td>{{ item.createdAt | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>